<template>
  <view style="background-color: #f4f7ff;">
    <!-- 导航栏，不显示返回按钮 -->
    <u-navbar title="臻成公考" :is-back="false" :bgColor="bgColor"></u-navbar>

    <view class="head">
      <view class="info">
        <view class="user">
          <image src="https://xyh.zjit.ac.cn/profile/upload/2024/12/06/Logo.png"></image>
          <view class="name">
            <text>上岸</text>
            <text>ID: {{ userId ? userId : '请先登录哦' }}</text>
          </view>
        </view>
      </view>

      <view class="card-container02">
        <u-cell-group :border="false">
          <u-cell-item class="icon-text-gap" border="false" title="我的错题" @click="toUrl('/subPackageB/wrong_questions?atype=1')" :title-style="{'font-size': '31rpx'}">
            <u-icon slot="icon" size="40" name="close-circle"></u-icon>
          </u-cell-item>
          <u-cell-item class="icon-text-gap" border="false" title="我的收藏" @click="toUrl('/subPackageB/wrong_questions?atype=2')" :title-style="{'font-size': '31rpx'}">
            <u-icon slot="icon" size="40" name="star"></u-icon>
          </u-cell-item>
          <u-cell-item class="icon-text-gap" border="false" title="我的申论" @click="toUrl('/subPackageB/mysl')" :border-bottom="false" :title-style="{'font-size': '31rpx'}">
            <u-icon slot="icon" size="40" name="edit-pen"></u-icon>
            <!-- 在我的申论处显示徽标 -->
            <u-badge v-if="hasUnreadReports" is-dot type="error"></u-badge>
          </u-cell-item>
        </u-cell-group>
      </view>

      <view class="card-container02">
        <u-cell-group :border="false">
         <u-cell-item class="icon-text-gap" border="false" title="联系客服" @click="showToast" :title-style="{'font-size': '31rpx'}">
           <u-icon slot="icon" size="40" name="server-man"></u-icon>
         </u-cell-item>
         <u-cell-item class="icon-text-gap" border="false" title="客服电话" @click="showToast" :title-style="{'font-size': '31rpx'}">
           <u-icon slot="icon" size="40" name="phone"></u-icon>
         </u-cell-item>
         <u-cell-item class="icon-text-gap" border="false" title="意见反馈" :border-bottom="false" @click="showToast" :title-style="{'font-size': '31rpx'}">
           <u-icon slot="icon" size="40" name="calendar"></u-icon>
         </u-cell-item>
        </u-cell-group>
      </view>

	  <u-toast ref="toast" :duration="2000" />

      <view class="logout-container" v-if="userId">
        <u-button @click="logout" type="error">退出登录</u-button>
      </view>
	  
	  <view class="space"></view>
    </view>
  </view>
</template>

<script>
import UToast from "@/uview-ui/components/u-toast/u-toast.vue";
import UCellItem from "@/uview-ui/components/u-cell-item/u-cell-item.vue";
import UIcon from "@/uview-ui/components/u-icon/u-icon.vue";
import UCellGroup from "@/uview-ui/components/u-cell-group/u-cell-group.vue";
import { getUserProfile } from '@/api/system/user';
import { logout } from '@/api/login';
import { allCorrects } from '@/api/business/correct'; // 引入获取批改记录的 API
import { EventBus } from '@/eventBus'; // 引入事件总线

export default {
  components: { UCellGroup, UIcon, UCellItem, UToast },

  data() {
    return {
      bgColor: '#f4f7ff',
      userId: null,
      hasUnreadReports: false // 新增状态以跟踪未读报告
    }
  },
  methods: {
	  showToast() {
	      this.$refs.toast.show({
	        title: '详情请见公众号哦',
	        type: 'primary',
			position: 'bottom'
	      });
	    },
    toUrl(url) {
      uni.navigateTo({
        url
      });
    },
    async fetchUserProfile() {
      try {
        const response = await getUserProfile();
        this.userId = response.data.userId; // adjust according to your response structure
        await this.checkUnreadReports(); // 检查未读报告
      } catch (error) {
        console.error("Failed to fetch user profile:", error);
      }
    },
    async checkUnreadReports() {
      try {
        const userProfile = await getUserProfile();
        const userId = userProfile.userId;
        const response = await allCorrects({ user_id: userId });
        const correctRecords = Array.isArray(response.data) ? response.data : [];
        
        // 检查是否存在 status = 1 的记录
        this.hasUnreadReports = correctRecords.some(record => record.status === '1');
      } catch (error) {
        console.error("Error checking unread reports:", error);
      }
    },
    async logout() {
      try {
        await logout();
        this.userId = null; // Reset userId after logout
        uni.showToast({
          title: '已退出登录',
          icon: 'success'
        });
        // Optionally, navigate to login page or refresh the current page
      } catch (error) {
        console.error("Logout failed:", error);
      }
    }
  },
  mounted() {
      this.fetchUserProfile();
      EventBus.$on('statusUpdated', this.checkUnreadReports); // 监听状态更新事件
    },
  beforeDestroy() {
	  EventBus.$off('statusUpdated', this.checkUnreadReports); // 组件销毁时取消监听
	},
}
</script>

<style lang="scss" scoped>
.space {
  padding-bottom: 2%;
}
	
.head {
  position: relative;
  width: 100%;
  height: 900rpx;
  background: linear-gradient(to bottom, #ff9191, #f8f8f8);
}

.head .info {
  padding-top: 80rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.head .info .user {
  padding-left: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.head .info .user image {
  width: 120rpx;
  height: 120rpx;
}

.head .info .user .name {
  padding-left: 20rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.head .info .user .name text {
  line-height: 40rpx;
}

.card-container02 {
  border-radius: 28rpx;
  overflow: hidden;
  background-color: #fff;
  padding: 20rpx;
  margin: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

.logout-container {
  display: flex;
  justify-content: center;
  margin-top: 25rpx;
  margin-bottom: 10rpx;
}

.icon-text-gap {
  display: flex;
  align-items: center;
}

.icon-text-gap u-icon {
  margin-right: 6px; /* 调整此值以增加或减少间隙 */
}
</style>
